<template>
	<view style="width: 710rpx; height: 250px;" >
		<map 
		  id="myMap" 
		  style="width: 710rpx; height: 250px;" 
		  :latitude="latitude" 
		  :longitude="longitude" 
		  :markers="markers" 
		  show-location>
		</map>
		<button @tap="getCenterLocation()" type="primary">获取当前地图中心的经纬度</button>
		<button @tap="moveToLocation()"  type="primary">将地图中心移动到当前定位点</button>
		<button @tap="translateMarker()" type="primary">平移marker，带动画</button>
		<button @tap="includePoints()" type="primary">缩放视野展示所有经纬度</button>
		<button @tap="scaleClick()" type="primary">获取当前地图的缩放级别</button>
		<button @tap="getRegionClick()" type="primary">获取当前地图的视野范围</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 23.099994,
				longitude: 113.324520,
				markers: [{
				  id: 1,
				  latitude: 23.099994,
				  longitude: 113.324520,
				  name: '腾讯',
				  width:20,   //宽
				  height:20,   //高
				}],
				mapCtx: {}
			};
		},
		// mounted() {
		// 	//创建 map 上下文 MapContext 对象。
		// 	this.mapCtx = wx.createMapContext('myMap')
		// },
		onReady() {  
		    this.mapCtx = uni.createMapContext("myMap", this);  
		}, 
		methods:{
			//获取当前地图中心的经纬度
			getCenterLocation() {
				console.log(223,this.mapCtx)
			    this.mapCtx.getCenterLocation({
			      success: function(res){
			        console.log(res.longitude)
			        console.log(res.latitude)
			      }
			    })
			},
			//将地图中心移动到当前定位点
			moveToLocation() {
			    this.mapCtx.moveToLocation()
			},
			//平移marker，带动画
			translateMarker() {
			    this.mapCtx.translateMarker({
			      markerId: 1,
			      autoRotate: true,
			      duration: 1000,
			      destination: {
			        latitude:23.10229,
			        longitude:113.3345211,
			      },
			      animationEnd() {
			        console.log('animation end')
			      }
			    })
			},
			//缩放视野展示所有经纬度
			includePoints() {
			    this.mapCtx.includePoints({
			      padding: [10],
			      points: [{
			        latitude:23.10229,
			        longitude:113.3345211,
			      }, {
			        latitude:23.00229,
			        longitude:113.3345211,
			      }]
			    })
			},
			//获取当前地图的缩放级别
			scaleClick(){
			    this.mapCtx.getScale({
			      success: function (res) {
			        console.log(res.scale)
			      }
			    })
			},
			//获取当前地图的视野范围
			getRegionClick() {
			    this.mapCtx.getRegion({
			      success: function (res) {
			        console.log(res.southwest)
			        console.log(res.northeast)
			      }
			    })
			}
		}
	}
</script>

<style lang="less">

</style>
